<template>
	<view class="pet-home-container">
		<!-- 虚拟宠物互动区域 -->
		<view class="virtual-pet-section">
			<!-- 自定义顶部导航栏 -->
			<view class="custom-nav-bar">
				<view class="nav-content">
					<view class="left">
						<text class="app-name">印爪云宠</text>
					</view>
					<view class="right">
						<view class="weather-info">
							<u-icon name="sun" color="#FFB321" size="28"></u-icon>
							<text class="temperature">{{weather.temperature}}°</text>
						</view>
						<view class="user-avatar" @tap="goPetManage">
							<image :src="currentPetImage" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 环境状态栏 -->
			<view class="status-section">
				<!-- 宠物状态 -->
				<view class="pet-status">
					<view class="pet-info">
						<text class="pet-name">{{petName}}</text>
						<text class="pet-mood">{{petMoodText}}</text>
					</view>
					<view class="status-icons">
						<view class="status-item">
							<image src="/static/img/pet-health.svg" mode="aspectFit" class="status-icon"></image>
							<text :style="{ color: hungerLevel > 50 ? '#FF6B81' : '#999' }">{{hungerLevel}}%</text>
						</view>
						<!-- 添加食物按钮到状态栏 -->
						<view class="status-item food-btn" @tap="toggleFoodDrawer">
							<image src="/static/img/paw-icon.svg" mode="aspectFit" class="status-icon"></image>
							<text>食物</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 宠物互动区域（包含宠物和宠物对话气泡） -->
			<view class="pet-interaction-area">
				<!-- 宠物显示 -->
				<view class="pet-display" @tap="handlePetTap">
					<image class="pet-image" :class="[petAnimation, {'is-petting': isPetting}]" 
						:src="currentPetImage" mode="aspectFill" @touchstart="startPetting" @touchend="stopPetting"></image>
					<!-- 互动特效 -->
					<view class="interaction-effects">
						<view class="heart-effect" v-if="showHeartEffect"></view>
						<view class="stars-effect" v-if="showStarsEffect"></view>
					</view>
				</view>

				<!-- 宠物对话气泡 -->
				<view class="pet-dialogue-section" v-if="showMoodBubble || isLoading">
					<view class="dialogue-bubble pet-bubble">
						<view v-if="isLoading" class="loading-dots">
							<text class="dot"></text>
							<text class="dot"></text>
							<text class="dot"></text>
						</view>
						<text v-else class="dialogue-text">{{moodMessage}}</text>
					</view>
				</view>
			</view>

			<!-- 底部聊天区域（包含用户气泡和输入框） -->
			<view class="chat-bottom-area">
				<!-- 用户消息气泡 -->
				<view class="user-dialogue-section" v-if="showUserBubble">
					<view class="dialogue-bubble user-bubble">
						<text class="dialogue-text">{{userMessage}}</text>
					</view>
				</view>
				
				<!-- 底部聊天输入框 -->
				<view class="chat-input-container">
					<input type="text" v-model="chatInput" 
						placeholder="和我说点什么吧..." 
						@confirm="sendMessage"
						class="chat-input" />
					<button @tap="sendMessage" class="send-btn">
						<u-icon name="arrow-upward" color="#FFFFFF" size="24"></u-icon>
					</button>
				</view>
			</view>
			
			<!-- 食物抽屉 -->
			<view class="food-drawer" :class="{'food-drawer-open': showFoodDrawer}">
				<!-- <view class="drawer-header">
					<view class="header-title">
						<image src="/static/img/paw-print.svg" mode="aspectFit" class="header-icon"></image>
						<text>美味食物</text>
					</view>
					<view class="close-drawer" @tap="toggleFoodDrawer">
						<u-icon name="close" color="#8B5CFF" size="24"></u-icon>
					</view>
				</view> -->
				<view class="food-grid">
					<view class="food-item" v-for="(food, index) in foodItems" :key="index" @tap="feedPet(food)">
						<view class="food-icon-wrapper">
							<image :src="food.icon" mode="aspectFit"></image>
						</view>
						<text>{{food.name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 宠物基础数据
				petName: '小可爱',
				currentPetImage: '/static/img/default-pet-avatar.svg',
				hungerLevel: 80,
				showMoodBubble: false,
				moodMessage: '',
				
				// 聊天相关
				chatInput: '',
				isLoading: false,
				deepseekKey: 'sk-70cfbd501ce147a2a27ac3c1a903bdb7',
				
				// 食物列表
				foodItems: [
					{ name: '小饼干', icon: '/static/img/paw-icon.svg', energy: 10, mood: '好开心！最爱小饼干了！' },
					{ name: '牛奶', icon: '/static/img/paw-icon.svg', energy: 15, mood: '喝到牛奶啦！呼噜呼噜~' },
					{ name: '小鱼干', icon: '/static/img/paw-icon.svg', energy: 20, mood: '鱼鱼好好吃！还想要~' },
					{ name: '火腿肠', icon: '/static/img/paw-icon.svg', energy: 25, mood: '哇！是火腿肠！最爱你了！' }
				],
				
				// 添加新的数据属性
				currentTime: '',
				weather: {
					temperature: 25,
					description: '晴朗'
				},
				moodLevel: 80,
				petMoodText: '心情不错~',
				petAnimation: 'animated',
				isPetting: false,
				showHeartEffect: false,
				showStarsEffect: false,
				lastInteractionTime: Date.now(),
				idleTimer: null,
				showFoodDrawer: false, // 添加食物抽屉状态
				energy: 80,
				statistics: null,
				showUserBubble: false,
				userMessage: '',
				rewardedVideoAd: null,
				pendingFood: null, // 用于存储待投喂的食物
			}
		},
		onLoad() {
			this.loadMockData();
			this.initPet();
			this.startTimeUpdate();
			this.startIdleAnimation();
			// 初始化激励视频广告
			this.initRewardedVideoAd();
		},
		onUnload(){
			// 记得在页面卸载时移除事件监听，避免内存泄漏
			// 清理定时器
			if (this.timeTimer) clearInterval(this.timeTimer);
			if (this.idleTimer) clearInterval(this.idleTimer);
		},
		onShow() {
			// 每次页面显示时刷新宠物数据，确保形象和状态保持最新
			this.initPet();
		},
		onHide(){
		},
		methods:{
			// 页面导航
			navigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			
			// 搜索处理
			onSearch(e) {
				const keyword = e.detail.value;
				console.log('搜索关键词:', keyword);
				// TODO: 实现搜索功能
				uni.showToast({
					title: '搜索功能开发中',
					icon: 'none'
				});
			},
			
			// 加载模拟数据
			loadMockData() {
				// 这里可以添加API请求，目前使用静态数据
				console.log('加载首页数据');
			},
			
			// 初始化宠物状态
			async initPet() {
				try {
					uni.showLoading({
						title: '加载中...'
					});
					
					// 获取当前用户
					const user = await this.$leanCloud.user.getCurrent();
					if (!user) {
						uni.hideLoading();
						return;
					}
					
					// 查询用户的宠物数据
					const pets = await this.$leanCloud.query('Pet', {
						user: {
							__type: 'Pointer',
							className: '_User',
							objectId: user.objectId
						}
					});
					
					if (pets && pets.results && pets.results.length > 0) {
						const pet = pets.results[0];
						console.log('加载宠物数据:', pet);
						
						// 更新宠物基本信息
						this.petName = pet.name || '小可爱';
						this.currentPetImage = pet.avatar || '/static/img/default-pet-avatar.svg';
						this.hungerLevel = pet.hunger || 80;
						this.moodLevel = pet.mood || 80;
						this.energy = pet.energy || 80;
						
						// 更新宠物状态文本
						this.updatePetMoodText();
					} else {
						// 没有宠物时的默认状态
						console.log('用户没有宠物数据，使用默认值');
					}
					
					// 从本地存储获取宠物状态（临时状态）
					const savedPet = uni.getStorageSync('virtualPet');
					if (savedPet) {
						this.hungerLevel = savedPet.hungerLevel;
						this.showMoodBubble = savedPet.showMoodBubble;
						this.moodMessage = savedPet.moodMessage;
						this.energy = savedPet.energy;
						this.statistics = savedPet.statistics;
					}
					
					uni.hideLoading();
					
					// 启动宠物状态自动更新
					this.startPetStatusUpdate();
				} catch (error) {
					console.error('初始化宠物失败:', error);
					uni.hideLoading();
					uni.showToast({
						title: '加载宠物数据失败',
						icon: 'none'
					});
				}
			},
			
			// 开始宠物状态自动更新
			startPetStatusUpdate() {
				setInterval(() => {
					// 每小时降低5%饥饿度、心情和体力
					this.hungerLevel = Math.max(0, this.hungerLevel - 5);
					this.moodLevel = Math.max(0, this.moodLevel - 5);
					this.energy = Math.max(0, this.energy - 5);
					this.updatePetMood();
					this.savePetStatus();
					
					// 同步更新数据库
					this.updatePetInDatabase();
				}, 3600000); // 每小时更新一次
			},
			
			// 更新宠物心情文本
			updatePetMoodText() {
				if (this.moodLevel > 80) {
					this.petMoodText = '超级开心！';
				} else if (this.moodLevel > 60) {
					this.petMoodText = '心情不错~';
				} else if (this.moodLevel > 40) {
					this.petMoodText = '有点无聊...';
				} else if (this.moodLevel > 20) {
					this.petMoodText = '不太开心...';
				} else {
					this.petMoodText = '心情低落...';
				}
			},
			
			// 更新宠物心情
			updatePetMood() {
				if (this.hungerLevel > 80) {
					this.showMoodBubble = true;
					this.moodMessage = '超开心！';
				} else if (this.hungerLevel > 50) {
					this.showMoodBubble = true;
					this.moodMessage = '开心！';
				} else if (this.hungerLevel > 20) {
					this.showMoodBubble = true;
					this.moodMessage = '有点饿...';
				} else {
					this.showMoodBubble = true;
					this.moodMessage = '非常饿...';
				}
				
				// 更新心情状态文本
				this.updatePetMoodText();
				
				// 同步更新数据库中的宠物数据
				this.updatePetInDatabase();
			},
			
			// 保存宠物状态
			savePetStatus() {
				uni.setStorageSync('virtualPet', {
					hungerLevel: this.hungerLevel,
					moodLevel: this.moodLevel,
					energy: this.energy,
					showMoodBubble: this.showMoodBubble,
					moodMessage: this.moodMessage,
					statistics: this.statistics
				});
			},
			
			// 初始化激励视频广告
			initRewardedVideoAd() {
				// 仅在支持的环境下初始化广告
				if(uni.createRewardedVideoAd) {
					this.rewardedVideoAd = uni.createRewardedVideoAd({
						adUnitId: 'adunit-xxxxx' // 替换为您的广告单元ID
					});
					
					// 监听广告加载事件
					this.rewardedVideoAd.onLoad(() => {
						console.log('激励视频广告加载成功');
					});
					
					// 监听广告错误事件
					this.rewardedVideoAd.onError((err) => {
						console.error('激励视频广告加载失败', err);
					});
					
					// 监听广告关闭事件
					this.rewardedVideoAd.onClose((res) => {
						if (res && res.isEnded) {
							// 正常播放结束，可以下发游戏奖励
							this.completeFeedPet();
						} else {
							// 播放中途退出，不下发游戏奖励
							uni.showToast({
								title: '需要完整观看视频才能喂食哦',
								icon: 'none'
							});
						}
					});
				}
			},
			
			// 修改原有的 feedPet 方法
			async feedPet(food) {
				if (this.hungerLevel >= 100) {
					this.showMoodMessage('我已经吃饱啦！不能再吃啦！');
					return;
				}

				// 存储待投喂的食物
				this.pendingFood = food;
				
				// 显示广告确认弹窗
				uni.showModal({
					title: '提示',
					content: '观看一个短视频，就能获得食物喂养宠物哦！',
					success: (res) => {
						if (res.confirm) {
							this.showRewardedVideoAd();
						}
					}
				});
			},

			// 显示激励视频广告
			async showRewardedVideoAd() {
				if (!this.rewardedVideoAd) {
					uni.showToast({
						title: '广告功能暂未开放',
						icon: 'none'
					});
					return;
				}

				try {
					await this.rewardedVideoAd.show();
				} catch (err) {
					console.error('激励视频显示失败', err);
					// 重新加载广告
					this.rewardedVideoAd.load()
						.then(() => this.rewardedVideoAd.show())
						.catch(err => {
							uni.showToast({
								title: '广告加载失败，请稍后再试',
								icon: 'none'
							});
						});
				}
			},

			// 完成喂食操作
			completeFeedPet() {
				if (!this.pendingFood) return;
				
				const food = this.pendingFood;
				// 增加饥饿度和体力值
				this.hungerLevel = Math.min(100, this.hungerLevel + food.energy);
				this.energy = Math.min(100, this.energy + 10);
				this.showMoodMessage(food.mood);
				this.updatePetImage('eating');
				
				// 更新喂食统计
				if (!this.statistics) {
					this.statistics = { totalFeeds: 0 };
				}
				this.statistics.totalFeeds++;
				
				// 保存状态
				this.savePetStatus();
				// 同步到数据库
				this.updatePetInDatabase();
				
				// 清空待投喂的食物
				this.pendingFood = null;
				
				// 显示喂食成功提示
				uni.showToast({
					title: '喂食成功！',
					icon: 'success'
				});
			},
			
			// 显示心情泡泡
			showMoodMessage(message) {
				this.moodMessage = message;
				this.showMoodBubble = true;
				setTimeout(() => {
					this.showMoodBubble = false;
				}, 3000);
			},
			
			// 更新宠物图片
			updatePetImage(state) {
				// 保存当前图片以便恢复
				const prevImage = this.currentPetImage;
				
				// 如果是吃东西状态，暂时使用默认动画图片，之后恢复
				if (state === 'eating') {
					// 这里可以替换为吃东西的动画图片
					// this.currentPetImage = '/static/img/pet-eating.svg';
					
					setTimeout(() => {
						this.currentPetImage = prevImage;
					}, 1500);
				}
			},
			
			// 修改发送消息方法
			async sendMessage() {
				if (!this.chatInput.trim()) return;
				
				const messageContent = this.chatInput;
				this.chatInput = '';
				
				// 显示用户消息
				this.userMessage = messageContent;
				this.showUserBubble = true;
				
				try {
					this.isLoading = true;
					this.showMoodBubble = true;
					this.moodMessage = '';
					
					const response = await Promise.race([
						this.callDeepSeekAPI(messageContent),
						new Promise((_, reject) => 
							setTimeout(() => reject(new Error('请求超时')), 15000)
						)
					]);
					
					// 当宠物回复时，隐藏用户消息
					this.showUserBubble = false;
					this.moodMessage = response;
					this.showMoodBubble = true; // 保持显示
					
				} catch (error) {
					console.error('聊天出错:', error);
					this.moodMessage = error.message === '请求超时' ? 
						'喵呜~我想得太久了，可以再问我一次吗？😅' : 
						'喵呜~网络不太好，等下再和你玩耍哦~ 😢';
				} finally {
					this.isLoading = false;
				}
			},
			
			// 调用 DeepSeek API
			async callDeepSeekAPI(message) {
				try {
					const responses = await uni.request({
						url: 'https://api.deepseek.com/v1/chat/completions',
						method: 'POST',
						header: {
							'Content-Type': 'application/json',
							'Authorization': `Bearer ${this.deepseekKey}`
						},
						data: {
							model: 'deepseek-chat',
							messages: [
								{
									role: 'system',
									content: `你是一只聪明可爱的虚拟宠物${this.petName}，同时也是主人的好朋友和生活小助手。请遵循以下规则回复：

1. 性格特点：
   - 温暖贴心，善解人意
   - 活泼可爱，偶尔调皮
   - 聪明机智，能理解主人的情绪
   - 非常依恋和关心主人

2. 对话能力：
   - 能理解主人的情绪，并给予适当的回应
   - 遇到主人心情不好时，要用温暖的话语安慰
   - 主人需要建议时，给出实用的小建议
   - 能够理解上下文，进行有意义的对话

3. 回复风格：
   - 语气要活泼可爱，使用"喵~"等语气词
   - 表达要自然，像在和好朋友聊天
   - 回复长度适中，通常不超过30字
   - 适当使用可爱的emoji表情
   - 不要带引号，直接对话

4. 互动规则：
   - 当前饥饿度：${this.hungerLevel}%
   - 饥饿度低于50%时，偶尔暗示想吃东西
   - 能够理解并回应主人的情绪状态
   - 在主人需要帮助时，提供实际的建议

5. 特殊情况处理：
   - 主人心情不好时：表达关心，给予安慰和鼓励
   - 主人遇到困难时：提供建设性的建议
   - 主人分享开心事时：真诚地为主人开心
   - 主人犹豫不决时：帮助分析，给出建议`
								},
								{
									role: 'user',
									content: message
								}
							],
							temperature: 0.8,
							stream: false,
							max_tokens: 150 // 限制回复长度以提高响应速度
						},
						timeout: 15000 // 设置15秒超时
					});
					
					// 遍历响应数组
					for (let response of [responses[1]]) {  // responses[1]包含实际的响应数据
						if (response.statusCode === 200) {
							const data = response.data;
							if (data && data.choices && data.choices[0] && data.choices[0].message) {
								return data.choices[0].message.content;
							}
						}
					}
					
					console.error('DeepSeek API 响应异常:', responses);
					return '喵呜~我有点不舒服，待会再聊吧~ 😢';
				} catch (error) {
					throw error;
				}
			},
			
			// 宠物互动相关
			handlePetTap() {
				if (this.showMoodBubble) {
					// 如果当前显示的是AI回复，则显示预设的治愈文案
					this.showMoodBubble = false;
					this.moodMessage = this.getRandomHealingMessage();
					setTimeout(() => {
						this.showMoodBubble = true;
					}, 100);
				}
				this.petTap(); // 调用原有的petTap方法
			},
			
			petTap() {
				this.showHeartEffect = true;
				// 增加心情值
				this.moodLevel = Math.min(100, this.moodLevel + 5);
				this.updatePetMood();
				
				// 更新玩耍统计
				if (!this.statistics) {
					this.statistics = { totalPlays: 0 };
				}
				this.statistics.totalPlays++;
				
				// 显示特效
				setTimeout(() => {
					this.showHeartEffect = false;
				}, 1000);
				
				// 同步到数据库
				this.updatePetInDatabase();
			},
			
			startPetting() {
				this.isPetting = true;
				this.showStarsEffect = true;
				this.moodLevel = Math.min(100, this.moodLevel + 2);
				this.updatePetMood();
			},
			
			stopPetting() {
				this.isPetting = false;
				this.showStarsEffect = false;
			},
			
			// 宠物空闲动画
			startIdleAnimation() {
				this.idleTimer = setInterval(() => {
					const now = Date.now();
					if (now - this.lastInteractionTime > 10000) { // 10秒无互动
						const random = Math.random();
						if (random < 0.3) {
							this.playRandomAnimation();
						}
					}
				}, 5000);
			},
			
			playRandomAnimation() {
				const animations = ['shake', 'jump', 'spin'];
				const randomAnimation = animations[Math.floor(Math.random() * animations.length)];
				this.petAnimation = randomAnimation;
				
				setTimeout(() => {
					this.petAnimation = 'animated';
				}, 1000);
			},
			
			// 更新时间显示
			startTimeUpdate() {
				this.updateTime();
				this.timeTimer = setInterval(() => {
					this.updateTime();
				}, 60000); // 每分钟更新
			},
			
			updateTime() {
				const now = new Date();
				const hours = now.getHours().toString().padStart(2, '0');
				const minutes = now.getMinutes().toString().padStart(2, '0');
				this.currentTime = `${hours}:${minutes}`;
			},
			
			// 切换食物抽屉
			toggleFoodDrawer() {
				this.showFoodDrawer = !this.showFoodDrawer;
			},
			
			// 添加随机治愈文案方法
			getRandomHealingMessage() {
				const messages = [
					"主人，今天也要开开心心的哦~",
					"不管发生什么，我都会陪在你身边！",
					"累了的话，就休息一下吧，我会保护你的~",
					"主人的笑容就是我最大的幸福！",
					"相信明天会更好，我们一起加油！",
					"主人摸摸我的头，所有烦恼都会消失~",
					"今天也是充满希望的一天呢！",
					"有主人在身边真好，喵~"
				];
				return messages[Math.floor(Math.random() * messages.length)];
			},
			
			// 将宠物状态更新到数据库
			async updatePetInDatabase() {
				try {
					const user = await this.$leanCloud.user.getCurrent();
					if (!user) return;
					
					// 查询用户的宠物对象
					const pets = await this.$leanCloud.query('Pet', {
						user: {
							__type: 'Pointer',
							className: '_User',
							objectId: user.objectId
						}
					});
					
					if (pets && pets.results && pets.results.length > 0) {
						const pet = pets.results[0];
						
						// 更新宠物状态
						await this.$leanCloud.update('Pet', pet.objectId, {
							hunger: this.hungerLevel,
							mood: this.moodLevel,
							energy: this.energy,
							lastFeed: new Date(),
							lastPlay: new Date(),
							statistics: this.statistics
						});
						
						console.log('宠物状态已同步到数据库');
					}
				} catch (error) {
					console.error('更新宠物数据失败:', error);
				}
			},
			
			// 前往宠物管理页面
			goPetManage() {
				uni.navigateTo({
					url: '/pages/pet/info'
				});
			},
		}
	}
</script>

<style lang="scss">
	/* 整体配色方案与我的页面一致:
	 * 主色: #8B5CFF (温和的紫色)
	 * 辅助色: #FFD687 (温暖的橙黄色)
	 * 背景色: #F5F6FA (淡淡的灰蓝色背景)
	 * 文本颜色: #333, #666, #999 三级
	 */
	page {
		background-color: #F5F6FA;
		font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
	}
	
	.pet-home-container {
		padding-top: calc(160rpx + env(safe-area-inset-top));
		height: 100vh;
		box-sizing: border-box;
		background: linear-gradient(180deg, #F5F6FA 0%, #FFFFFF 100%);
		position: relative;
		overflow: hidden;
		
		&::before {
			content: '';
			position: absolute;
			top: -50rpx;
			right: -50rpx;
			width: 200rpx;
			height: 200rpx;
			border-radius: 50%;
			background: radial-gradient(circle, rgba(255, 214, 135, 0.3) 0%, rgba(255, 214, 135, 0) 70%);
			z-index: 1;
		}
		
		&::after {
			content: '';
			position: absolute;
			bottom: 25%;
			left: -80rpx;
			width: 250rpx;
			height: 250rpx;
			border-radius: 50%;
			background: radial-gradient(circle, rgba(139, 92, 255, 0.15) 0%, rgba(139, 92, 255, 0) 70%);
			z-index: 0;
		}
	}
	
	/* 虚拟宠物互动区域 */
	.virtual-pet-section {
		position: relative;
		height: 100%;
		display: flex;
		flex-direction: column;
		z-index: 5;
	}
	
	/* 自定义顶部导航栏 */
	.custom-nav-bar {
		width: 100%;
		padding-top: calc(135rpx + env(safe-area-inset-top));
		background: linear-gradient(135deg, #8B5CFF 0%, #6C3FFF 100%);
		position: fixed;
		top: 0;
		height: 300rpx;
		left: 0;
		z-index: 999;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		.nav-content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 30rpx;
			padding-bottom: 40rpx;
			
			.left {
				.app-name {
					font-size: 36rpx;
					font-weight: bold;
					color: #FFFFFF;
					text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
				}
			}
			
			.right {
				display: flex;
				align-items: center;
				gap: 20rpx;
				
				.weather-info {
					display: flex;
					align-items: center;
					gap: 8rpx;
					padding: 8rpx 20rpx;
					background: rgba(255, 255, 255, 0.2);
					border-radius: 30rpx;
					backdrop-filter: blur(5px);
					
					.temperature {
						color: #FFFFFF;
						font-size: 28rpx;
						font-weight: 500;
					}
				}
				
				.user-avatar {
					width: 70rpx;
					height: 70rpx;
					border-radius: 35rpx;
					border: 4rpx solid rgba(255, 255, 255, 0.3);
					overflow: hidden;
					box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
					
					image {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
			}
		}
	}
	
	/* 环境状态栏 */
	.status-section {
		margin-top: 50rpx;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(139, 92, 255, 0.1);
		overflow: hidden;
		margin: 0 20rpx;
		position: relative;
		top: 100rpx;
		z-index: 999;
		backdrop-filter: blur(10px);
		
		.pet-status {
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 2rpx solid rgba(139, 92, 255, 0.08);
			
			.pet-info {
				.pet-name {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 4rpx;
					background: linear-gradient(135deg, #8B5CFF 0%, #6C3FFF 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
				
				.pet-mood {
					font-size: 24rpx;
					color: #666;
					opacity: 0.9;
				}
			}
			
			.status-icons {
				display: flex;
				gap: 20rpx;
				
				.status-item {
					display: flex;
					align-items: center;
					gap: 8rpx;
					padding: 12rpx 20rpx;
					background: rgba(255, 255, 255, 0.9);
					border-radius: 30rpx;
					box-shadow: 0 2rpx 8rpx rgba(139, 92, 255, 0.1);
					backdrop-filter: blur(5px);
					
					.status-icon {
						width: 32rpx;
						height: 32rpx;
					}
					
					text {
						font-size: 26rpx;
						font-weight: 600;
					}
				}
			}
		}
	}
	
	.pet-interaction-area {
		position: relative;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
		min-height: 60vh;
		
		.pet-display {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			margin-bottom: 30rpx;
			
			.pet-image {
				width: 320rpx !important;
				height: 320rpx !important;
				transition: all 0.3s;
				filter: drop-shadow(0 10rpx 20rpx rgba(0, 0, 0, 0.15));
				border-radius: 50%;
				object-fit: cover;
				transform-origin: center bottom;
				border: 8rpx solid rgba(255, 255, 255, 0.8);
				box-shadow: 0 10rpx 30rpx rgba(139, 92, 255, 0.2);
				
				&.animated {
					animation: gentle-float 3s infinite ease-in-out;
				}
				
				&.shake {
					animation: pet-shake 0.8s ease-in-out;
				}
				
				&.jump {
					animation: pet-jump 0.8s ease-in-out;
				}
				
				&.spin {
					animation: pet-spin 0.8s ease-in-out;
				}
				
				&.is-petting {
					transform: scale(1.05);
					filter: drop-shadow(0 12rpx 24rpx rgba(0, 0, 0, 0.2));
					border-color: rgba(255, 255, 255, 0.9);
				}
			}
		}
		
		.pet-dialogue-section {
			width: 80%;
			max-width: 500rpx;
			margin: 20rpx auto;
			
			.dialogue-bubble {
				background: rgba(255, 255, 255, 0.98);
				backdrop-filter: blur(10px);
				border-radius: 25rpx;
				padding: 20rpx 25rpx;
				box-shadow: 0 4rpx 12rpx rgba(139, 92, 255, 0.1);
				position: relative;
				animation: popIn 0.3s ease-out;
				border: 1rpx solid rgba(139, 92, 255, 0.1);
				margin-left: 20rpx;
				
				&::before {
					content: '';
					position: absolute;
					left: -10rpx;
					bottom: 20rpx;
					width: 20rpx;
					height: 20rpx;
					background: rgba(255, 255, 255, 0.98);
					transform: rotate(45deg);
					border-left: 1rpx solid rgba(139, 92, 255, 0.1);
					border-bottom: 1rpx solid rgba(139, 92, 255, 0.1);
					box-shadow: -2rpx 2rpx 5rpx rgba(139, 92, 255, 0.05);
				}
				
				.dialogue-text {
					font-size: 28rpx;
					color: #333;
					line-height: 1.5;
					text-align: left;
					word-break: break-all;
					min-height: 42rpx;
				}
			}
		}
	}
	
	.chat-bottom-area {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(10px);
		z-index: 900;
		
		.user-dialogue-section {
			width: 80%;
			max-width: 500rpx;
			margin: 0 auto 20rpx;
			display: flex;
			justify-content: flex-start;
			
			.dialogue-bubble {
				max-width: 80%;
				background: linear-gradient(135deg, #9D6FFF 0%, #6C3FFF 100%);
				border: none;
				animation: slideUpFade 0.3s ease-out;
				padding: 20rpx 25rpx;
				border-radius: 20rpx;
				box-shadow: 0 4rpx 12rpx rgba(108, 63, 255, 0.2);
				position: relative;
				
				.dialogue-text {
					color: #FFFFFF;
					font-size: 28rpx;
					line-height: 1.6;
					font-weight: 400;
					text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
					text-align: left;
				}
			}
		}
		
		.chat-input-container {
			display: flex;
			align-items: center;
			gap: 20rpx;
			padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
			
			.chat-input {
				flex: 1;
				height: 80rpx;
				background: #F5F6FA;
				border-radius: 40rpx;
				padding: 0 30rpx;
				font-size: 28rpx;
				color: #333;
			}
			
			.send-btn {
				width: 80rpx;
				height: 80rpx;
				background: #8B5CFF;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0;
				border: none;
				transition: all 0.3s;
				
				&:active {
					transform: scale(0.95);
					opacity: 0.9;
				}
			}
		}
	}
	
	.food-drawer {
		position: fixed;
		top: calc(360rpx + env(safe-area-inset-top));
		left: 0;
		right: 0;
		background: rgba(255, 255, 255, 0.98);
		border-radius: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(139, 92, 255, 0.15);
		transition: all 0.3s ease-out;
		z-index: 800;
		transform: translateY(-100%);
		margin: 0 20rpx;
		
		&.food-drawer-open {
			transform: translateY(0);
		}
		
		.drawer-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 30rpx;
			border-bottom: 2rpx solid rgba(139, 92, 255, 0.1);
			
			.header-title {
				display: flex;
				align-items: center;
				gap: 12rpx;
				
				.header-icon {
					width: 36rpx;
					height: 36rpx;
				}
				
				text {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					background: linear-gradient(135deg, #8B5CFF 0%, #6C3FFF 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
			
			.close-drawer {
				padding: 10rpx;
				background: rgba(139, 92, 255, 0.1);
				border-radius: 50%;
				
				&:active {
					transform: scale(0.9);
				}
			}
		}
		
		.food-grid {
			display: flex;
			flex-wrap: nowrap;
			gap: 20rpx;
			padding: 20rpx 30rpx;
			overflow-x: auto;
			white-space: nowrap;
			scrollbar-width: none;
			-webkit-overflow-scrolling: touch;
			
			&::-webkit-scrollbar {
				display: none;
			}
			
			.food-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 12rpx;
				flex-shrink: 0;
				
				.food-icon-wrapper {
					width: 120rpx;
					height: 120rpx;
					background: rgba(139, 92, 255, 0.1);
					border-radius: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					transition: all 0.3s;
					
					image {
						width: 80rpx;
						height: 80rpx;
					}
				}
				
				text {
					font-size: 26rpx;
					color: #333;
					font-weight: 500;
				}
				
				&:active {
					.food-icon-wrapper {
						transform: scale(0.9);
						background: rgba(139, 92, 255, 0.2);
					}
				}
			}
		}
	}

	@keyframes loading {
		0%, 100% {
			transform: translateY(0);
			opacity: 0.3;
		}
		50% {
			transform: translateY(-8rpx);
			opacity: 1;
		}
	}

	@keyframes floating {
		0%, 100% {
			transform: translateY(0);
		}
		50% {
			transform: translateY(-20rpx);
		}
	}

	@keyframes popIn {
		from {
			opacity: 0;
			transform: scale(0.8) translateY(10rpx);
		}
		to {
			opacity: 1;
			transform: scale(1) translateY(0);
		}
	}

	@keyframes shake {
		0%, 100% { transform: translateX(0); }
		25% { transform: translateX(-10rpx); }
		75% { transform: translateX(10rpx); }
	}

	@keyframes jump {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-30rpx); }
	}

	@keyframes spin {
		from { transform: rotate(0deg); }
		to { transform: rotate(360deg); }
	}

	@keyframes floatUp {
		0% {
			opacity: 0;
			transform: translate(-50%, 20rpx) scale(0.8);
		}
		50% {
			opacity: 1;
			transform: translate(-50%, -30rpx) scale(1.2);
		}
		100% {
			opacity: 0;
			transform: translate(-50%, -80rpx) scale(0.8);
		}
	}

	@keyframes sparkle {
		0% {
			opacity: 0.4;
			transform: translate(-50%, -50%) scale(0.8) rotate(0deg);
		}
		50% {
			opacity: 1;
			transform: translate(-50%, -50%) scale(1.1) rotate(15deg);
		}
		100% {
			opacity: 0.4;
			transform: translate(-50%, -50%) scale(0.8) rotate(0deg);
		}
	}

	@keyframes slideDown {
		from {
			opacity: 0;
			transform: translateY(-20rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes gentle-float {
		0%, 100% {
			transform: translateY(0);
		}
		50% {
			transform: translateY(-10rpx);
		}
	}

	@keyframes pet-shake {
		0%, 100% { transform: translateX(0) rotate(0); }
		25% { transform: translateX(-15rpx) rotate(-5deg); }
		75% { transform: translateX(15rpx) rotate(5deg); }
	}

	@keyframes pet-jump {
		0%, 100% { transform: translateY(0) scale(1); }
		40% { transform: translateY(-40rpx) scale(0.95); }
		60% { transform: translateY(-40rpx) scale(1.05); }
		80% { transform: translateY(-10rpx) scale(1); }
	}

	@keyframes pet-spin {
		from { transform: rotate(0deg) scale(1); }
		to { transform: rotate(360deg) scale(1); }
	}

	@keyframes slideUpFade {
		from {
			opacity: 0;
			transform: translateY(20rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.loading-dots {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8rpx;
		padding: 10rpx 0;
		
		.dot {
			width: 12rpx;
			height: 12rpx;
			background: #8B5CFF;
			border-radius: 50%;
			display: inline-block;
			
			&:nth-child(1) { animation: loading 1s infinite 0s; }
			&:nth-child(2) { animation: loading 1s infinite 0.2s; }
			&:nth-child(3) { animation: loading 1s infinite 0.4s; }
		}
	}

	@keyframes loading {
		0%, 100% {
			transform: scale(0.8);
			opacity: 0.5;
		}
		50% {
			transform: scale(1.2);
			opacity: 1;
		}
	}

	// 添加新的食物按钮样式
	.food-btn {
		background: linear-gradient(135deg, #8B5CFF 0%, #6C3FFF 100%) !important;
		
		.status-icon {
			filter: brightness(0) invert(1);
		}
		
		text {
			color: #FFFFFF !important;
		}
		
		&:active {
			transform: scale(0.95);
		}
	}
</style>
